<template>
    <div class="box">
      <navTop></navTop>
      <div class="brandXie" :style="{width:(screenWidth>=1400?'1400px':'1200px')}">
        <div style="display: flex;align-items: center;justify-content: space-between;">
          <div style="display: flex;align-items: center;">
            <div class="margin-i">
              <span class="input-c">时间</span>
              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="timechange">
              </el-date-picker>
            </div>
            <div class="margin-i">
              <span class="input-c">类型</span>
              <el-select v-model="type3" placeholder="请选择" @change="typechange">
                <el-option
                  v-for="item in examclassify"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="margin-i">
              <span class="input-c">年级</span>
              <el-select v-model="grade" placeholder="请选择" @change="gradechange">
                  <el-option
                    key="全部"
                    label="全部"
                    value="全部">
                  </el-option>
                <el-option
                  v-for="item in gradelist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="btnBlue" @click="addExam(2)">添加新考试</div>
        </div>
        <div v-if="examlist.length>0">
                  <div class="examlist">
                      <div class="examlistbox" v-for="(item,index) in examlist" :key="index">
                          <div class="elsconlist">
                              <div class="elsconlistTitle"><span>联考</span>{{item.grade}}{{item.month}}{{item.examTime}}{{item.area}}</div>
                              <div class="elsconlistTime"><span>考试时间：{{item.maintenancegte?item.maintenancegte:'暂无时间'}}</span>年级：{{item.grade}}</div>
                              <div class="elsconlistProgress">
                                  考试进度：
                                  <ul>
                                      <li :class="item.type==0?'state1':''">考试信息</li>
                                      <li :class="item.type==1?'state2':''">在线阅卷</li>
                                      <li :class="item.type==2?'state3':''">成绩分析</li>
                                  </ul>
                              </div>
                          </div>
                          <div>
                              <el-button type="primary" @click="selectexam(item)">选择考试</el-button>
                              <el-button type="primary" class="lastchildrenbutton" v-if="item.createType==1" @click="fixedexam(item,'1')">编辑</el-button>
                          </div>
                      </div>
                  </div>
                  <div style="padding-top:30px;">
                      <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page.sync="pageIndex"
                          :page-size="pageSize"
                          layout="prev, pager, next, jumper"
                          :total="listTotal">
                      </el-pagination>
                  </div>
              </div>
              <div v-else class="emptyBox">
                  <p>
                      <img src="../../assets/image/empty.png" alt="">
                      <span>抱歉，当前栏目下没有内容！</span>
                  </p>
              </div>
      </div>
      <!-- 创建新考试 -->
      <div class="addExamMain" v-if="addExamIshow">
          <div class="addExamContent">
              <h3>{{titleshow==1?'编辑考试':'创建考试'}}</h3>
              <ul>
                  <li>
                      <span>选择考试年级<i>*</i></span>
                      <el-select v-model="addinfo.gradeId" placeholder="请选择">
                        <el-option
                          v-for="item in gradelist"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                  </li>
                  <li>
                      <span>添加考试时间<i>*</i></span>
                      <el-date-picker
                        v-model="addexamtime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                  </li>
                  <li>
                      <span>添加考试名称<i>*</i></span>
                      <el-input v-model="addinfo.name" placeholder="请输入内容" @input="handleInput"></el-input>
                  </li>
                  <li>
                      <span>选择考试科目<i>*</i></span>
                      <el-select v-model="addinfo.subjectList" multiple placeholder="请选择">
                          <el-option
                            v-for="item in subjectlist"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                  </li>
                  <li>
                      <span>总分<i>*</i></span>
                      <el-input v-model="addinfo.fullMark" placeholder="请输入内容"></el-input>
                  </li>
                  <li>
                      <span>查分开关</span>
                      <el-switch
                        v-model="addswidth">
                      </el-switch>
                  </li>
                  <li style="color:red;" v-if="attentionIshow">
                      <span></span>
                      <i class="el-icon-warning-outline"></i>{{attention}}
                  </li>
              </ul>
              <div class="groupbutton">
                  <el-button type="primary" @click="surebc">保存</el-button>
                  <el-button type="primary" @click="goback">返回</el-button>
                  <el-button type="primary" @click="deleteExam">删除</el-button>
              </div>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  import navTop from "../../components/head.vue"
  import { navlist,navgetgrade,naveditexam,examDelete } from '../../api/scoreapi'
  export default {
      components:{navTop},
      data() {
        return {
            titleshow:null,
          screenWidth:0,
          time: null,
          type3: null,
          grade: '全部',
          examclassify:[
              {name:'全部',id:null},
              {name:'老高考',id:0},
              {name:'新高考3+3',id:1},
              {name:'新高考3+1+2',id:2},
              {name:'不区分',id:3}
          ],
          gradelist:[],
          subjectlist:['语文','数学','英语','物理','化学','生物','历史','地理','政治','日语'],
          examlist: [],
          addinfo:{
              gradeId:'',
              examTime:'',
              name:'',
              subjectList:[],
              fullMark:'',
              selectScoreType:false?0:1,
              n4Id:undefined,
              n5Id:undefined
          },
          newtime:null,
          addExamIshow:false,
          pageIndex:1,
          pageSize:50,
          addexamtime:'',
          addswidth:false,
          attention:'',
          attentionIshow:false,
          listTotal:''
        }
      },
      methods: {
          // 处理每页条数变化
          handleSizeChange(val){
              this.pageSize = val
              this.examlistclick(this.starttime,this.endtime,this.type3,this.grade)
          },
          // 处理当前页码变化
          handleCurrentChange(val){
              this.pageIndex = val
              this.examlistclick(this.starttime,this.endtime,this.type3,this.grade)
          },
          //时间修改
          timechange(val){
              
              if (val==null) {
                  this.examlistclick(null,null,this.type3,this.grade)
                  console.info('+111')
              } else {
                  console.info('+22')
                  let datastarttime=val[0]
                  let dataendtime=val[1]
                  const date = new Date(datastarttime);
                  const date1 = new Date(dataendtime);
                  let year = date.getFullYear()
                  let month=String(date.getMonth() + 1).padStart(2, '0')
                  let day=String(date.getDate()).padStart(2, '0')
                  let start = `${year}-${month}-${day}`
                  let year1 = date1.getFullYear()
                  let month1=String(date1.getMonth() + 1).padStart(2, '0')
                  let day1=String(date1.getDate()).padStart(2, '0')
                  let end = `${year1}-${month1}-${day1}`
                  this.starttime = start
                  this.endtime=end
                  this.examlistclick(start,end,this.type3,this.grade)
              }
              
          },
          // 类型
          typechange(val){
              this.examlistclick(this.starttime,this.endtime,val,this.grade)
              this.type3 = val
          },
          //年级筛选
          gradechange(val){
              if(val=='全部'){
                  this.examlistclick(this.starttime,this.endtime,this.type3,'')
                  this.grade = '全部'
              }else{
                  this.examlistclick(this.starttime,this.endtime,this.type3,val)
                  this.grade = val
              }
              
          },
          // 年级列表
          gradeclick(){
              let params={
                  ntype:2
              }
              navgetgrade(params).then(res=>{
                  if(res.code==0){
                      this.gradelist = res.data
                  }else{
                      this.$message({
                          type: 'error',
                          message: res.msg
                      }); 
                  }
              })
          },
        // 获取列表
              examlistclick(starttime,endtime,type,grade){
                  let params={}
                  if(this.time){
                      params={
                          pageIndex:this.pageIndex,
                          pageSize:this.pageSize,
                          startTime:starttime?starttime:undefined,
                          endTime:endtime?endtime:undefined,
                          type3:type!=null?type:undefined,
                          grade:grade=='全部'||grade==''?undefined:grade
                      }
                  }else{
                      params={
                          pageIndex:this.pageIndex,
                          pageSize:this.pageSize,
                          startTime:undefined,
                          endTime:undefined,
                          type3:type!=null?type:undefined,
                          grade:grade=='全部'||grade==''?undefined:grade
                      }
                  }
                  
                  navlist(params).then(res=>{
                      if(res.code==0){
                          this.examlist = res.data.examResultList.filter(item=>{return item.type==2})
                          this.listTotal = res.data.total
                      }else{
                          this.$message({
                              type: 'error',
                              message: res.msg
                          }); 
                      }
                  })
              },
          //添加考试
          addExam(num){
              this.addExamIshow = true
              this.titleshow = num
              this.addinfo={
                  gradeId:'',
                  examTime:'',
                  name:'',
                  subjectList:[],
                  fullMark:'',
                  selectScoreType:false?0:1,
                  n4Id:null,
                  n5Id:null
              }
              this.addswidth = false
          },
          handleInput(value) {
             const filteredValue = value.replace(/[+\-*/.\s!@#]/g, '')
              // 这里使用 $nextTick 确保 DOM 更新后再设置值，避免光标位置问题
              this.$nextTick(() => {
                this.addinfo.name = filteredValue;
              });
          },
          //编辑考试
          fixedexam(con,num){
              this.addExamIshow = true
              this.addinfo.gradeId = con.n2Id
              this.addexamtime = [con.startTime, con.endTime]
              this.addinfo.name=con.area
              this.addinfo.subjectList=con.subjectList,
              this.addinfo.fullMark=con.fullMark,
              this.addinfo.n4Id=con.n4Id
              this.addinfo.n5Id=con.n5Id
              this.addswidth = con.selectScoreType==0?false:true
              this.titleshow = num
              
          },
          //删除
          deleteExam(){
              let params={
                  id:this.addinfo.n4Id
              }
              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                  examDelete(params).then(res=>{
                      if(res.code==0){
                          this.addExamIshow=false
                          this.$message({
                              type: 'success',
                              message: '删除成功!'
                          });
                          this.examlistclick(this.starttime,this.endtime,this.type3,this.grade)
                      }else{
                          this.$message({
                              type: 'error',
                              message: res.msg
                          });
                      }
                  })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
          },
          // 返回
          goback(){
              this.addExamIshow=false
              this.attentionIshow = false
              this.attention=''
              this.addexamtime = ''
              this.addinfo={
                  gradeId:'',
                  examTime:'',
                  name:'',
                  subjectList:[],
                  fullMark:'',
                  selectScoreType:false?0:1,
                  n4Id:null,
                  n5Id:null
              }
          },
          //选择考试
          selectexam(item){
              this.$router.push('/confirmmain/examinationinfo?con='+encodeURIComponent(JSON.stringify(item)))
              sessionStorage.setItem('activeMenuIndex', '/confirmmain/examinationinfo?con='+JSON.stringify(item));
          },
          //保存
          surebc(){
              // console.info(this.addinfo.fullMark)
              if(this.addinfo.gradeId==''||this.addinfo.gradeId==0){
                  this.attentionIshow = true
                  this.attention='请选择考试年级'
                  return false
              }else if(!this.addexamtime){
                  this.attentionIshow = true
                  this.attention='请添加考试时间'
                  return false
              }else if(this.addinfo.name==''){
                  this.attentionIshow = true
                  this.attention='请添加考试名称'
                  return false
              }else if(this.addinfo.subjectList.length<=0){
                  this.attentionIshow = true
                  this.attention='请选择考试科目'
                  return false
              }else if(this.addinfo.fullMark==''){
                  this.attentionIshow = true
                  this.attention='请填写总分'
                  return false
              }
              const isValidInteger = /-?\d+$/.test(this.addinfo.fullMark);
              if (!isValidInteger) {
                  this.attentionIshow = true
                  this.attention='请填写整数'
                  return false
                }
              let datastarttime=this.addexamtime[0]
              let dataendtime=this.addexamtime[1]
              const date = new Date(datastarttime);
              const date1 = new Date(dataendtime);
              let year = date.getFullYear()
              let month=String(date.getMonth() + 1).padStart(2, '0')
              let day=String(date.getDate()).padStart(2, '0')
              let start = `${year}-${month}-${day}`
              let year1 = date1.getFullYear()
              let month1=String(date1.getMonth() + 1).padStart(2, '0')
              let day1=String(date1.getDate()).padStart(2, '0')
              let end = `${year1}-${month1}-${day1}`
              this.addinfo.examTime = start + '至' + end
              this.addinfo.selectScoreType=this.addswidth?1:0
              naveditexam(this.addinfo).then(res=>{
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  });
                  this.addExamIshow = false
                  this.examlistclick(this.starttime,this.endtime,this.type3,this.grade)
                  this.addinfo={
                      gradeId:'',
                      examTime:'',
                      name:'',
                      subjectList:[],
                      fullMark:'',
                      selectScoreType:false?0:1,
                      n4Id:null,
                      n5Id:null
                  }
                  this.addexamtime = ''
              })
          }
      },
      mounted() {
        this.screenWidth = document.body.clientWidth
        this.gradeclick() //年级列表
        this.examlistclick()
        localStorage.setItem('menuState', 2);
      }
  }
  </script>
  
  <style scoped>
  .box {
    background:#eee;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
  }
  .brandXie{
      padding:20px;
      margin:20px auto 0 auto;
      height: calc(100vh - 120px);
    /* overflow: auto; */
    background-color: #fff;
    box-sizing: border-box;
  }
  .spanBlue {
    padding: 7px 14px;
    color: #fff;
    background-color: #165DFF;
    text-align: center;
    text-align: center;
    border-radius: 3px;
  }
  .btnBlue {
    padding: 7px 14px;
    color: #fff;
    background-color: #165DFF;
    text-align: center;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
  }
  .margin-i {
    margin-right: 20px;
  }
  .input-c {
    color: #4E5969;
    margin-right: 10px;
  }
  .examlist{
      height:calc(100vh - 300px);
      /* overflow-x: hidden; */
      /* overflow-y: auto; */
  overflow: auto;
  margin-top: 30px;
  }
  /*滚动条区域*/
  .examlist::-webkit-scrollbar{
    width:5px;
    background-color:#fff;
  }
  /*滚动条*/
  .examlist::-webkit-scrollbar-thumb{
    background-color:#4076DD;
    border-radius:50px;
  }
  /*滚动条外层轨道*/
  .examlist::-webkit-scrollbar-track {
      /* -webkit-box-shadow: inset 0 0 1px ; */
      background-color:#eee;
      border-radius: 50px;
  }
  .examlistbox{
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding:20px 15px 10px;
      border:solid 1px #C1C3C6;
      align-items: center;
      margin-bottom:23px;
  }
  .examlistbox >>> .el-button{
      width: 124px;
      height: 44px;
      border-radius: 6px;
      border: 1px solid #3874FF;
      color:#3874FF;
      font-size: 18px;
      line-height:44px;
      margin-right:20px;
      cursor: pointer;
      background:none;
      padding:0;
  }
  .examlistbox >>> .el-button.lastchildrenbutton{
      background-color: #165DFF;
      color:#fff;
  }
  .elsconlist{
      cursor: pointer;
      margin-bottom:20px;
      width: 45%;
  }
  .examlistbox:hover{
      box-shadow: 0px 4px 10px 0px rgba(56,116,255,0.21);
      border: 1px solid #3874FF;
  }
  .elsconlistTitle{
      font-size:20px;
      display: flex;
      align-items: center;
  }
  .elsconlistTitle span{
      display: inline-block;
      width: 82px;
      height: 32px;
      background: #3874FF;
      border-radius: 4px;
      font-size:16px;
      color:#fff;
      text-align: center;
      line-height:32px;
      margin-right:10px;
  }
  .elsconlistTime{
      display: flex;
      font-size:14px;
      color:#989899;
      padding-top:18px;
      width:120%;
  }
  .elsconlistTime span{
      display:block;
      width:80%
  }
  .elsconlistProgress{
      display: flex;
      padding-top:20px;
      align-items: center;
      font-size:14px;
      color:#989899;
  }
  .elsconlistProgress ul{
      display: flex;
      align-items: center;
  }
  .elsconlistProgress ul li{
      box-sizing: border-box;
      text-align: center;
      color:#101010;
      margin-right:5px;
      width: 80px;
      height: 26px;
      line-height:26px;
      border-radius: 16px 0px 16px 0px;
      border: 1px solid #979797;
  }
  .elsconlistProgress ul .state1{
      background:#48D67B;
      border:solid 1px #48D67B;
      color:#fff;
  }
  .elsconlistProgress ul .state2{
      background:#6B8DF0;
      border:solid 1px #6B8DF0;
      color:#fff;
  }
  .elsconlistProgress ul .state3{
      background:#E9B573;
      border:solid 1px #E9B573;
      color:#fff;
  }
  .emptyBox{
      /* background:#eceff3; */
  background-color: #fff;
      height:calc(100% - 80px);
      position:relative
  }
  .emptyBox p{
      position:absolute;
      left:50%;
      top:40%;
      transform:translate(-50%,-50%);
      text-align:center;
  }
  .emptyBox p span{
      display:block;
      padding-top:30px;
  }
  .addExamMain{
      position: fixed;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.5);
      left:0;
      top:0;
      z-index:1;
  }
  .addExamContent{
      width: 741px;
      min-height: 664px;
      position: fixed;
      background:#fff;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      z-index:2;
      box-sizing: border-box;
      padding:30px;
  }
  .addExamContent h3{
      font-size:18px;
      padding-bottom:20px;
  }
  .addExamContent ul li{
      display: flex;
      align-items: center;
      padding-bottom:30px;
  }
  .addExamContent ul li span{
      font-size:16px;
      display: flex;
      align-items: center;
      width:140px;
      justify-content: left;
  }
  .addExamContent ul li span i{
      font-style:normal;
      color:red;
      padding-left:5px;
  }
  .addExamContent ul li p{
      position: relative;
  }
  .addExamContent ul li p em{
      position: absolute;
      right:10px;
      top:50%;
      transform: translateY(-50%);
      color:#C0C4CC;
      cursor: pointer;
  }
  .addExamContent ul li >>> .el-input{
      width:350px;
  }
  .groupbutton{
      display: flex;
      align-items: center;
      padding-top:60px;
  }
  .groupbutton >>> .el-button{
      background:#165DFF;
      width:100px;
      margin-right:20px;
  }
  .groupbutton >>> .el-button:last-child{
      background:#F53F3F;
      border:solid 1px #F53F3F;
  }
  </style>